<template>
    <div >
        <ul >
            <li v-for="(item, index) in navimg" :key="index" @click="tabFn(index)">

                <img :src="item.img1" v-show="item.zt">
                <img :src="item.img2" v-show="!item.zt">

                <p :class="{ pcolor: !item.zt }">{{ item.name }}</p>
            </li>
        </ul>
        <div class="selectionbox" v-show="loginshow">
            <button @click="gopage('mynotlogin'), loginshow = false">未登录</button>
            <br>
            <button @click="gopage('mylogin'), loginshow = false">已登录</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NavView',

    data() {
        return {
            navimg: [
                {
                    name: "书城",
                    img1: "https://cdn7.axureshop.com/demo/1182587/images/%E5%88%86%E7%B1%BB/u3718.png",
                    img2: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u937.png",
                    zt: false,
                    url: "usercenter"//需要改成书城主页面
                },
                {
                    name: "分类",
                    img1: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u941.png",
                    img2: "https://cdn7.axureshop.com/demo/1182587/images/%E5%88%86%E7%B1%BB/u3722.png",
                    zt: true,
                    url: "classification"
                },
                {
                    name: "书架",
                    img1: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/u945.png",
                    img2: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E6%9E%B6/u4043.png",
                    zt: true,
                    url: "bookshelf"
                },
                {
                    name: "我的",
                    img1: "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E5%9F%8E/account_circle_u949.png",
                    img2: "https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/account_circle_u4441.png",
                    zt: true,
                    url: ""
                },
            ],
            loginshow: false,
           
        };
    },

    mounted() {
        this.navimg[this.result].zt = false
    },

    methods: {
        gopage(url) {
            
            this.$router.push({
                path: url,
                query:{nav:this.navimg}
            })
            
        },
        tabFn(index) {
            for (let i = 0; i < this.navimg.length; i++) {
                this.navimg[i].zt = true
            }
            this.navimg[index].zt = false
            if (index == 3) {
                this.loginshow = true
            } else {
                this.gopage(this.navimg[index].url)
                this.loginshow = false
            }
        },
        

    },
   
};
</script>

<style lang="less" scoped>
ul {
    width: 100%;
    padding: 1rem 0;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 99;
    background-color: #fff;

    li {
        color: #cccccc;
        font-size: 1.2rem;

        img {
            width: 2.1rem;
            height: 1.8rem;
        }

        .pcolor {
            color: #41C872;
        }
    }
}

.selectionbox {
    width: fit-content;
    font-size: 1.2rem;
    background-color: #fff;
    border: 0.1rem solid #AAA;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
    position: fixed;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 999;

    button {
        background-color: #eeeeee;
        padding: 0.3rem 0.8rem;
        border: 0.1rem solid #AAA;
        border-radius: 0.3rem;
        margin: 0.2rem 0;
    }
}
</style>